<template>

    <div class="login">
      <div class="login_box">
        <div class="login_title">用户登陆</div>

        <div class="login_content">
          <el-form :model="loginFrom" label-width="80px" v-if="loginFlag">
            <el-form-item label="手机号">
              <el-input v-model="loginFrom.phone"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="loginFrom.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="login">登录</el-button>
              <el-link type="primary" style="float: right" @click="register">注册</el-link>
            </el-form-item>
          </el-form>
          <el-form :model="registerFrom" label-width="80px" v-if="registerFlag">
            <el-form-item label="手机号">
              <el-input v-model="registerFrom.phone"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="registerFrom.password" type="password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input v-model="registerFrom.secondPassword" type="secondPassword"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="registerLogin">注册</el-button>
              <el-link type="primary" style="float:right;" @click="secondLogin">登录</el-link>
            </el-form-item>
          </el-form>
        </div>

      </div>
    </div>
</template>

<script>
import { login } from '@/api/login'
export default {
  name: 'index',
  data () {
    return {
      loginFrom: {
        phone: '18779463884',
        password: '123456'
      },
      registerFrom: {
        phone: '',
        password: '',
        secondPassword: ''
      },
      loginFlag: true,
      registerFlag: false
    }
  },
  methods: {
    login () {
      login(this.loginFrom).then(res => {
        /* 给浏览器中设置token */
        sessionStorage.setItem('xixi_token', res.data)
      })
    },
    register () {
      this.loginFlag = false
      this.registerFlag = true
    },
    secondLogin () {
      this.loginFlag = true
      this.registerFlag = false
    },
    registerLogin () {}
  }
}
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  background: #45406d;
  display: flex;
  align-items: center;
  justify-content: center;
  .login_box {
    width: 525px;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    overflow: hidden;
    .login_title {
      font-size: 24px;
      text-align: center;
      line-height: 48px;
    }
  }
}
</style>
